diff options
Diffstat (limited to 'src/routes/(app)/[username]/invoice')
3 files changed, 68 insertions, 93 deletions
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte index ad9721e7..fff2b22c 100644 --- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte +++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte @@ -1,12 +1,13 @@ <script> + import { enhance } from '$app/forms'; import { send } from '$lib/socket'; - import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils'; + import { post, back, copy, f, get, types, sat, reverseFormat, s, sats } from '$lib/utils'; import { tick, onMount, onDestroy } from 'svelte'; import { browser } from '$app/environment'; import { last } from '$lib/store'; import { Avatar, Icon, Heart, Image } from '$comp'; import { t } from '$lib/translations'; - import screenfull from 'screenfull'; + import { goto, invalidate } from '$app/navigation'; export let data; @@ -21,18 +22,19 @@ prompt, text, tip, + request_id, user: { username, currency } } = invoice; let showQr = !amount; - let src = sm; + $: src = sm; let qr; let tipPercent = 0; let refresh = (data) => { - ({ invoice, id } = data); + ({ invoice, id, user, sm, lg } = data); ({ amount, hash, @@ -64,31 +66,54 @@ $: link = type === 'bitcoin' ? text : `lightning:${text}`; $: txt = type === 'bitcoin' ? hash : text; - let full; - let toggle = () => { - screenfull.toggle(qr); - full = !full; - if (full) src = lg; - else src = sm; + let toggleType = async () => { + invoice.type = invoice.type === types.lightning ? types.bitcoin : types.lightning; + ({ hash } = await post(`/${username}/invoice`, { + invoice, + user: { username, currency } + })); + + goto(`./${hash}`, { invalidateAll: true }); }; </script> <div class="container mx-auto max-w-lg px-4 space-y-5"> - <div class="relative flex"> - <div class="flex mx-auto w-[360px] h-[360px]"> + <div class="whitespace-nowrap my-auto ml-auto flex gap-2"> + <button + class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full" + class:bg-black={type === types.lightning} + class:text-white={type === types.lightning} + on:click={toggleType} + > + ⚡️ Lightning + </button> + + <button + class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center " + class:bg-black={type === types.bitcoin} + class:text-white={type === types.bitcoin} + on:click={toggleType} + > <img - {src} - class:p-4={full} - class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" - bind:this={qr} - on:click={toggle} - on:keydown={toggle} - alt={txt} + src="/images/bitcoin.svg" + class="my-auto w-8 border-4 border-transparent" + alt="Bitcoin" /> - </div> - <div - class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0" - /> + <div class="my-auto">Bitcoin</div> + </button> + </div> + + <div> + <a href={invoice.type === 'bitcoin' ? invoice.text : 'lightning:' + invoice.text}> + <div class="relative flex"> + <div class="flex mx-auto w-[360px] h-[360px]"> + <img {src} class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" bind:this={qr} alt={txt} /> + </div> + <div + class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0" + /> + </div> + </a> </div> {#if amount > 0} @@ -115,9 +140,9 @@ {/if} <div class="w-full flex justify-center"> - <button class="flex rounded-full border py-2 px-5 hover:opacity-80" on:click={() => copy(txt)}> + <button class="flex rounded-full border py-3 px-5 hover:opacity-80" on:click={() => copy(txt)}> <Icon icon="copy" style="mr-1" /> - <div class="text-secondary">{txt.substr(0, 10)}..{txt.substr(-6)}</div></button + <div class="text-secondary">{txt.substr(0, 10)}...{txt.substr(-10)}</div></button > </div> </div> diff --git a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte index 432b137a..3a281728 100644 --- a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte +++ b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte @@ -4,7 +4,7 @@ import { toast } from '@zerodevx/svelte-toast'; import { browser } from '$app/environment'; import { t } from '$lib/translations'; - import { f, s, sat, sats } from '$lib/utils'; + import { fiat, f, s, sat, sats } from '$lib/utils'; import { goto } from '$app/navigation'; export let data; @@ -12,10 +12,6 @@ $: data && ({ amount, currency, rate, received, pending, tip, user, id } = data.invoice); toast.pop(0); - - $: amountFiat = parseFloat((((received - tip) * rate) / sats).toFixed(2)); - $: pendingFiat = parseFloat((((pending - tip) * rate) / sats).toFixed(2)); - $: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2)); </script> <div class="container px-4 text-center mx-auto"> @@ -25,15 +21,20 @@ {#if received} <h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1> <h2 class="text-2xl md:text-3xl font-semibold"> - {f(amountFiat, currency)} + {f(fiat(received - tip, rate), currency)} {#if tip} - + {f(tipFiat, currency)} + <span class="text-lg"> + + {f(fiat(tip, rate), currency)} + </span> {/if} </h2> <h3 class="text-secondary md:text-lg mb-6 mt-1"> - {sat(received - tip)} + ⚡️{s(received - tip)} + {#if tip} - +{sat(tip)} + <span class="text-lg"> + + ⚡️{s(tip)} + </span> {/if} </h3> {/if} @@ -41,15 +42,17 @@ {#if pending} <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1> <h2 class="text-2xl md:text-3xl font-semibold"> - {f(pendingFiat, currency)} + {f(fiat(pending, rate), currency)} {#if tip} - + {f(tipFiat, currency)} + + {f(fiat(tip, rate), currency)} {/if} </h2> <h3 class="text-secondary md:text-lg mb-6 mt-1"> - {sat(pending - tip)} + ⚡️{s(pending - tip)} {#if tip} - +{sat(tip)} + <span class="text-lg"> + + ⚡️{s(tip)} + </span> {/if} </h3> {/if} diff --git a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte index d033c413..296ef9c6 100644 --- a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte +++ b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte @@ -3,7 +3,7 @@ import { browser } from '$app/environment'; import { invoice as inv, request } from '$lib/store'; import { copy, focus, f, sat, get, reverseFormat, s, sats } from '$lib/utils'; - import { Icon } from '$comp'; + import { Icon, Slider } from '$comp'; import { goto } from '$app/navigation'; import { t } from '$lib/translations'; import { enhance } from '$app/forms'; @@ -37,9 +37,6 @@ customInput.value = ''; } tipPercent = e.target.value; - - clearTimeout(timeout); - timeout = setTimeout(update, 800); }; let submitting; @@ -56,10 +53,6 @@ }; let submit; - let update = async () => { - await tick(); - //submit.click(); - }; export let data; $: refresh(data); @@ -123,16 +116,7 @@ {#if !showCustomAmount} <div class="my-2 text-xl">{Math.round(tipPercent)}%</div> - <input - id="slider" - type="range" - min="0" - max="100" - value={tipPercent} - class="px-0 py-0 my-5" - style="--bgPercent: {tipPercent}%;" - on:input={handleSlide} - /> + <Slider handle={handleSlide} bind:value={tipPercent} /> <div class="flex mb-8 text-lg"> <div> @@ -201,43 +185,6 @@ </div> <style> - #slider { - -webkit-appearance: none; - width: 100%; - height: 6px; - border-radius: 5px; - background: linear-gradient( - to right, - black 0%, - black var(--bgPercent), - #f5f7fa var(--bgPercent), - #f5f7fa 100% - ); - outline: none; - } - - #slider:active { - background-color: black; - } - - #slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 30px; - height: 30px; - border-radius: 50%; - background: black; - cursor: pointer; - } - - #slider::-moz-range-thumb { - width: 30px; - height: 30px; - border-radius: 50%; - background: black; - cursor: pointer; - } - .active { @apply !bg-black !text-white; } |